<uib-accordion close-others="oneAtATime">
    <div uib-accordion-group class="panel-default" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
        <uib-accordion-heading>
            <span>Dynamic Group-1</span>
            <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isFirstOpen, 'glyphicon-chevron-right': !status.isFirstOpen}"></i>
        </uib-accordion-heading>
        <div ng-controller="ListGroupController" class="col-lg-12">
            <div>
                <my-list-group></my-list-group>
            </div>
        </div>
    </div>
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
        {{group.content}}
    </div>
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
        <p>The body of the uib-accordion group grows to fit the contents</p>
        <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
        <div ng-repeat="item in items">{{item}}</div>
    </div>
    <div uib-accordion-group class="panel-default" is-open="status.open">
        <uib-accordion-heading>
            I can have markup, too! <i class="pull-right glyphicon"
                                       ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
        </uib-accordion-heading>
        This is just some content to illustrate fancy headings.
    </div>
</uib-accordion>